<template>
  <div class="mz-panel light second">
    <!-- content -->
    <div class="mz-panel-content">
      <div
        class="title"
        :style="{
          justifyContent: align
        }"
      >
        <span class="title-name" v-if="title">{{ title }}</span>
        <slot name="title"></slot>
        <span class="close" @click="close" v-if="showClose"></span>
      </div>
      <div
        class="mz-panel-content-main"
        :style="{
          flexDirection: direction,
          ...mainStyle
        }"
      >
        <slot></slot>
      </div>
      <!-- bg -->
      <div class="mz-panel-bg no-rem">
        <div class="bg-box top no-rem">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
        <div class="bg-box center no-rem">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
        <div class="bg-box bottom no-rem">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 地图弹框面板组件
 * @author 阳坤
 * @date   时间：
 */
export default {
  name: 'MzBouncedPanel'
}
</script>

<script setup>
import { defineEmits, defineProps, ref, defineExpose, useAttrs } from 'vue'

const props = defineProps({
  // 面板标题
  title: {
    type: String,
    default: ''
  },
  align: {
    type: String,
    default: 'left'
  },
  // 内容排列方式
  direction: {
    type: String,
    default: 'column' // column or row
  },
  // 主体样式
  mainStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  showClose: {
    type: Boolean,
    default: true
  }
})

const maskShow = ref(false)

const emit = defineEmits(['close'])

const close = () => emit('close')
defineExpose({
  maskShow
})
</script>

<style scoped lang="less">
@import url(./styles/index.less);
</style>
